<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Vue({data}){
        this._data = data
    //    1.数据代理
        for(let key in this._data){
            Object.defineProperty(this,key,{
                get:function proxyGetter(){
                    return this._data[key]
                },
                set:function proxySetter(newVal){
                    this._data[key] = newVal
                }
            })
        }

    //    2.数据劫持
        observe(this._data)
    }


    function observe(data){
        for(let key in data){
            defineReactive(data,key)
        }
    }

    function defineReactive(data,key){
        if(typeof data[key]==='object' && data[key]!==null)observe(data[key])
        let value = data[key]
        Object.defineProperty(data,key,{
            get:function reactiveGetter(){
                return value
            },
            set:function reactiveSetter(newVal){
                value = newVal
                console.log('数据更新了')
                template()
            }
        })
    }

    const vm = new Vue({
        data:{
            count:18,
            price:1700,
            hobby:{
                eat:'apple',
                sports:'run'
            }
        }
    })

    function template(){
        console.log(`当前商家喜欢吃${vm.hobby.eat}，喜欢的运动是${vm.hobby.sports},他买了${vm.count}件价值${vm.price}元的大衣！！！`)
    }
</script>
</body>
</html>